<template>
  <view class="index-detail-layout">
    <my-header background-color="transparent" :fit-weixin="false">
      <template v-slot:default>
        <view class="tabbar">
          <!-- <image @click="back()" src="http://www.qixdian.cn/upload/20231009/65240b305ea8d.png" class="back"></image> -->
          <!-- <view class="tabbar_name">
            <image class="user-avatar" mode="aspectFill"
              :src="blindBoxDetail.rank_status ? blindBoxDetail.rank_avatar : 'https://www.dingxians.cn/upload/user_static/user/avatar.png'"
              @click="header(`/pages/index/rank?blind_box_id=${blindBoxDetail.id}`)"></image>
            <view class="user-name" @click="header(`/pages/index/rank?blind_box_id=${blindBoxDetail.id}`)"
              v-if="blindBoxDetail.rank_status">
              {{ blindBoxDetail.rank_nickname }}
              <text style="color: #ded000; font-family: 'youshe'; margin-left: 10rpx">已占榜</text>
              <text style="color: #ded000; font-family: 'youshe'" class="num">
                X{{ blindBoxDetail.rank_diff_time }}发
              </text>
            </view>
            <view class="user-name" @click="header(`/pages/index/rank?blind_box_id=${blindBoxDetail.id}`)" v-else>
              当前无人占领
              <strong>
                <i style="margin-left: 20rpx">
                  <text style="color: #ded000">快去抽盒吧</text>
                </i>
              </strong>
            </view>
          </view> -->
        </view>
      </template>

      <template v-slot:menu>
        <image @click="play" src="https://www.dingxians.cn/images/index/play-method.png" class="play"></image>
      </template>
    </my-header>
    <my-content class="content">
      <view class="shade" :class="[shadeStatus ? 'show' : 'hidden']" @click="closeShade()" @touchmove.stop.prevent>
      </view>

      <view class="scroll-content">

        <view class="box">
          <swiper :current="current" circular="true" :autoplay="autoplay" :interval="interval" :duration="duration"
            @change="changeBox" class="swiper" v-if="blindBoxDetail.blind_box_prize.length">
            <swiper-item class="swiper_item" v-for="(item, index) in blindBoxDetail.blind_box_prize" :key="item.id">
              <image mode="heightFix" class="swiper_image" :src="item.image"></image>
            </swiper-item>
          </swiper>
          <view class="prize_box">
            <view class="prize-title" style="font-family: 'youshe'; font-size: 46rpx">
              {{ blindBoxDetail.name }}
            </view>
            <view class="prize_name">{{ goods_title }}</view>
            <view class="box_prize">
              <view class="box_prize_icon">￥</view>
              <view class="box_prize_num">
                {{ blindBoxDetail.price }}
                <del class="box-price2">￥{{ goods_prize }}</del>
              </view>
            </view>
          </view>
        </view>
        <!-- <lff-barrage ref="barrage"></lff-barrage> -->
        <!-- <view class="header">
          <view class="header_box_name">{{ blindBoxDetail.name }}</view>
          <view class="header_top">
            <view class="header_top_icon">￥</view>
            <view>{{ blindBoxDetail.price }}</view>
          </view>
        </view> -->

        <view class="goods_box">
          <view class="goods_box_top">
            <view class="goods_header" v-if="tabId == 1">
              <view class="goods_pro" :style="{ color: item.level_color }" v-for="item in blindBoxDetail.probability"
                :key="item.id">
                <view class="level" :style="[useLevelBg('icon', item.level_id)]">
                  {{ item.level_name }}
                </view>
                <view class="goods_price">{{ item.pro }}</view>
              </view>
            </view>
            <view class="goods_header" v-if="tabId == 2">
              <view class="goods_pro" v-for="item in levelData" :key="item.id">
                <view class="header_bottom_text" style="font-family: 'youshe'"
                  :class="[selectLevelId == item.id ? 'active' : '']" @click="changeSelectLevel(item.id)">
                  {{ item.title }}
                </view>
              </view>
            </view>
            <image src="https://www.dingxians.cn/upload/user_static/index/history.png" mode="heightFix"
              class="goods_bottom" @click="changeLog()" v-if="tabId == 1"></image>
            <image src="https://www.dingxians.cn/upload/user_static/index/back.png" mode="heightFix"
              class="goods_bottom" @click="getPrize()" v-if="tabId == 2"></image>
          </view>

          <view class="goods_box_bottom" v-if="tabId == 1">
            <view class="goods_item_box" v-if="level_4_prize.length"
              style="background-image: url('https://www.dingxians.cn/upload/user_static/box/bg-box-legend.png')">
              <view class="goods_item_level"
                style="background-image: url('https://www.dingxians.cn/upload/user_static/index/bg-header-legend.png')">
                <view class="goods_item_level_pro">
                  <text style="font-family: 'youshe',serif; font-size: 38rpx; margin-right: 15rpx">传说款</text>
                  共{{ level_4_prize.length }}款，获得概率{{ blindBoxDetail.probability[3].pro }}
                </view>
              </view>

              <view class="goods_item_arr">
                <view @click="changePirze(item.id)" class="goods_item" v-for="item in level_4_prize" :key="item.id">
                  <view class="goods-image"
                    style="background-image: url('https://www.dingxians.cn/upload/user_static/box/bg-goods-image-legend.png')">
                    <image :src="item.image" mode="heightFix" style="width: 80%; height: 80%" />
                  </view>
                  <view class="goods-name">{{ item.title }}</view>
                  <view class="goods-price">￥{{ blindBoxDetail.price }}</view>
                </view>
              </view>
            </view>

            <view class="goods_item_box" v-if="level_3_prize.length"
              style="background-image: url('https://www.dingxians.cn/upload/user_static/box/bg-box-epic.png')">
              <view class="goods_item_level"
                style="background-image: url('https://www.dingxians.cn/upload/user_static/index/bg-header-epic.png')">
                <!-- <image
                  mode="heightFix"
                  src="http://www.qixdian.cn/upload/20231011/652671a8b0497.png"
                  class="goods_item_level_title"
                ></image> -->
                <view class="goods_item_level_pro">
                  <text style="font-family: 'youshe'; font-size: 38rpx; margin-right: 15rpx">史诗款</text>
                  共{{ level_3_prize.length }}款，获得概率{{ blindBoxDetail.probability[2].pro }}
                </view>
              </view>
              <view class="goods_item_arr">
                <view @click="changePirze(item.id)" class="goods_item" v-for="item in level_3_prize" :key="item.id">
                  <view class="goods-image"
                    style="background-image: url('https://www.dingxians.cn/upload/user_static/box/bg-goods-image-epic.png')">
                    <image :src="item.image" mode="heightFix" style="width: 80%; height: 80%" />
                  </view>
                  <view class="goods-name">{{ item.title }}</view>
                  <view class="goods-price">￥{{ blindBoxDetail.price }}</view>
                </view>
              </view>
            </view>

            <view class="goods_item_box" v-if="level_2_prize.length"
              style="background-image: url('https://www.dingxians.cn/upload/user_static/box/bg-box-rare.png')">
              <view class="goods_item_level"
                style="background-image: url('https://www.dingxians.cn/upload/user_static/index/bg-header-rare.png')">
                <!-- <image
                  mode="heightFix"
                  src="http://www.qixdian.cn/upload/20231011/6526719d37b93.png"
                  class="goods_item_level_title"
                ></image> -->
                <view class="goods_item_level_pro">
                  <text style="font-family: 'youshe'; font-size: 38rpx; margin-right: 15rpx">稀有款</text>
                  共{{ level_2_prize.length }}款，获得概率{{ blindBoxDetail.probability[1].pro }}
                </view>
              </view>
              <view class="goods_item_arr">
                <view @click="changePirze(item.id)" class="goods_item" v-for="item in level_2_prize" :key="item.id">
                  <view class="goods-image"
                    style="background-image: url('https://www.dingxians.cn/upload/user_static/box/bg-goods-image-rare.png')">
                    <image :src="item.image" mode="heightFix" style="width: 80%; height: 80%" />
                  </view>
                  <view class="goods-name">{{ item.title }}</view>
                  <view class="goods-price">￥{{ blindBoxDetail.price }}</view>
                </view>
              </view>
            </view>

            <view class="goods_item_box" v-if="level_1_prize.length"
              style="background-image: url('https://www.dingxians.cn/upload/user_static/box/bg-box-normal.png')">
              <view class="goods_item_level"
                style="background-image: url('https://www.dingxians.cn/upload/user_static/index/bg-header-normal.png')">
                <!-- <image
                  mode="heightFix"
                  src="http://www.qixdian.cn/upload/20231011/65267195ad879.png"
                  class="goods_item_level_title"
                ></image> -->
                <view class="goods_item_level_pro">
                  <text style="font-family: 'youshe'; font-size: 38rpx; margin-right: 15rpx">普通款</text>
                  共{{ level_1_prize.length }}款，获得概率{{ blindBoxDetail.probability[0].pro }}
                </view>
              </view>

              <view class="goods_item_arr">
                <view @click="changePirze(item.id)" class="goods_item" v-for="item in level_1_prize" :key="item.id">
                  <view class="goods-image"
                    style="background-image: url('https://www.dingxians.cn/upload/user_static/box/bg-goods-image-normal.png')">
                    <image :src="item.image" mode="heightFix" style="width: 80%; height: 80%" />
                  </view>
                  <view class="goods-name">{{ item.title }}</view>
                  <view class="goods-price">￥{{ blindBoxDetail.price }}</view>
                </view>
              </view>
            </view>
          </view>

          <view class="goods_box_bottom" v-if="tabId == 2">
            <scroll-view class="scroll" refresher-background="" :refresher-triggered="refreshStatus"
              @refresherrefresh="refresh" :refresher-enabled="true" scroll-y="true" @scrolltolower="lower">
              <view class="scroll_top" v-if="selectLevelId">
                距离上一次已开出
                <text class="scroll_top_num">X{{ last_times }}</text>
                发
              </view>
              <view class="scroll_box">
                <view style="position: relative;"
                  :style="{ backgroundImage: `url(https://www.dingxians.cn/upload/${item.level_id == 4 ? '20250423/68089e7be6557' : item.level_id == 3 ? '20250423/68089e7be7f30' : item.level_id == 2 ? '20250423/68089e7be76df' : '20250423/68089e7be72b2'}.png)` }"
                  :class="!selectLevelId ? 'active' : 'active2'" class="scroll_item" v-for="item in logData"
                  :key="item.id">
                  <view class="scroll_item_top">

                    <view class="scroll_user_nickname"
                      style="position: absolute;left: 10rpx;top: 0rpx;font-size: 19rpx;">{{
                        item.id }}</view>
                    <view class="scroll_item_left">
                      <image :src="item.avatar" class="user_avatar"></image>
                      <view class="scroll_user">
                        <view class="scroll_user_nickname">{{ item.nickname }}</view>
                        <view class="scroll_prize_name">{{ item.blind_box_prize_name }}</view>
                        <view class="scroll_prize_name" style="width: 180rpx;font-size: 18rpx;">{{ item.created_at }}
                        </view>
                      </view>
                    </view>
                    <view class="scroll_item_right">
                      <view class="scroll_prize_name" style="width: 100rpx;font-size: 20rpx;">{{ item.level_name }}
                      </view>

                      <!-- <view class="scroll_prize_level" :style="{color:item.level_color}">{{item.level_name}}</view> -->
                      <view class="goods-info">
                        <image mode="heightFix" class="scroll_prize_image" :src="item.blind_box_prize_image"></image>
                        <text v-if="selectLevelId" class="goods-num">x{{ item.diff_times }}</text>
                      </view>
                    </view>
                  </view>
                  <view class="scroll_item_bottom"></view>
                </view>
              </view>
            </scroll-view>
          </view>
        </view>

      </view>

      <!-- <view class="prize_pop" :class="[prizeStatus ? 'show' : 'hidden']"  @touchmove.stop.prevent>
      <view class="prize_pop_header">
        <image @click="closePrize()" src="https://www.dingxians.cn/images/shop/close.png" class="prize_pop_close"></image>
        <view class="prize_pop_header_title">开盒必出以下宝贝之一</view>
        <view class="prize_pop_header_num">共{{blindBoxDetail.prize_total}}款</view>
      </view>
      
      <view class="prize_pro_box">
        <view class="prize_pro_item" @click="changeLevel(item.level_id)"  v-for="item in blindBoxDetail.probability" :key="item.id">
          <view class="prize_level_name">{{item.level_name}}</view>
          <view class="prize_pro" :class="[item.level_id == levelId ? 'active' : '']">{{item.pro}}</view>
        </view>
      </view>
      
      <view class="prize_box">
        <view class="prize_item" v-for="item in prizeData" :key="item.id">
          <image class="prize_image" mode="heightFix" :src="item.image"></image>
          <view class="prize_content">
            <view class="prize_name">{{item.title}}</view>
            <view class="prize_price">
              <view class="price_icon">￥</view>
              <view>{{item.price}}</view>
            </view>
          </view>
        </view>
      </view>
    </view> -->

      <!-- 付款弹窗 -->
      <view class="pay_pop" :class="[payStatus ? 'show' : 'hidden']" @touchmove.stop.prevent @click.prevent>
        <view class="pay_header">
          <image @click="closePay()" src="https://www.dingxians.cn/images/shop/close-btn.png" class="pay_pop_close">
          </image>
          <view class="pay_header_title" style="font-family: 'youshe',serif">确认支付</view>
        </view>

        <view class="pay_content">
          <view class="pay_item">
            <view>总计</view>
            <view class="pay_num_box">
              <view>￥</view>
              <view>{{ total_amount }}</view>
            </view>
          </view>
          <!-- <view class="pay_item">
            <view>优惠券</view>
            <view class="coupon" @click="showCoupon()" v-if="couponData.length > 0">
              <view v-if="coupon_amount <= 0">选择优惠券</view>
              <view v-else>-{{ coupon_amount }}</view>
              <image class="coupon_icon" src="https://www.dingxians.cn/images/user/right.png"></image>
            </view>
            <view class="coupon" v-else>
              <view>暂无优惠券</view>
              <image class="coupon_icon" src="https://www.dingxians.cn/images/user/right.png"></image>
            </view>
          </view> -->
          <!--          <view class="pay_item" v-if="blindBoxDetail.cat_id == 2">
                      <view>加倍</view>
                      <view class="pay_num_box">
                        <my-number-box
                          :min="min_multiple"
                          :max="blindBoxDetail.max_multiple"
                          v-model="multiple"
                        ></my-number-box>
                      </view>
                    </view>-->
          <view class="pay_item">
            <view>虎币抵扣</view>
            <view class="pay_num_box">
              <image mode="widthFix" src="https://www.dingxians.cn/upload/user_static/index/zuanshi.png"
                class="pay_gold_icon point"></image>
              <view>{{ point_price }}</view>
            </view>
          </view>
          <view class="pay_item">
            <view>虎元素支付</view>
            <view class="pay_num_box">
              <image mode="widthFix" src="https://www.dingxians.cn/images/shop/money.png" class="pay_gold_icon"></image>
              <view>{{ pay_amount }}</view>
            </view>
          </view>
        </view>

        <!-- 当用户金额不足时，显示出来此页面 -->
        <view class="pay-more" v-if="is_pay_more">
          <view class="pay-mode">
            <view class="pay-mode-title">选择支付方式</view>
            <view class="pay-mode-item" @click="pay_more_mode = item.id" v-for="(item, index) in pay_mode_list"
              :key="index">
              <view class="pay-mode-left">
                <image class="pay-mode-img" :src="item.icon" mode="scaleToFill" />
                <text>{{ item.name }}</text>
              </view>
              <view class="pay-mode-right">
                <image class="pay-mode-select"
                  :src="`https://www.dingxians.cn/images/common/${pay_more_mode === item.id ? 'selected' : 'unselected'}.png`"
                  mode="scaleToFill" />
              </view>
            </view>
          </view>
          <view class="need-pay-num">
            <view class="need-pay-title">需支付</view>
            <view class="num">{{ difference_amount }}</view>
          </view>
        </view>

        <view class="greee">
          <image @click="changeAgree()" class="agree_icon" src="https://www.dingxians.cn/images/common/selected.png"
            v-if="agreeStatus">
          </image>
          <image @click="changeAgree()" class="agree_icon" src="https://www.dingxians.cn/images/common/unselected.png"
            v-if="!agreeStatus"></image>
          <view class="agree_text">
            我已满18岁，已阅读并同意
            <text class="agrees_user" @click.stop="header('/packageB/content/user')">《用户协议》</text>
          </view>
        </view>

        <view class="open-box" v-if="drawStatus" @click="draw()" style="font-family: 'youshe',serif">
          {{ is_pay_more ? '立即支付' : '立即开盒' }}
        </view>
        <view class="open-box" v-else style="font-family: 'youshe',serif">立即开盒</view>
        <view class="tip_box">
          <view>谢绝未成年人使用或请在监护人的监督下体验</view>
          <view>风险提示：商品抽奖存在概率，付款需谨慎</view>
        </view>
      </view>

      <!-- 优惠券弹窗 -->
      <view class="coupon_pop" :class="[couponStatus ? 'show' : 'hidden']">
        <view class="coupon_header">
          <image @click="closeCoupon()" src="https://www.dingxians.cn/images/shop/close-btn.png" class="coupon_close">
          </image>
          <view class="coupon_header_title">选择优惠券</view>
        </view>

        <view class="coupon_content">
          <view class="coupon_item" @click="selectCoupon(item, index)" v-for="(item, index) in couponData"
            :key="item.id">
            <view class="coupon_right">
              <view class="coupon_title">{{ item.name }}</view>
              <view class="coupon_bottom">
                <view class="created_at">有效期至{{ item.expired_at }}</view>
              </view>
              <view class="coupon-info">
                <view class="coupon_remark">{{ item.remark }}</view>
                <view class="coupon_min_amount" v-if="item.min_amount > 0">满{{ item.min_amount }}可用</view>
                <view class="coupon_min_amount" v-else>无门槛</view>
              </view>
            </view>
            <view class="coupon_left">
              <!-- <image class="coupon_bg" src="http://www.qixdian.cn/upload/20230909/64fc4443c17d3.png"></image> -->
              <view class="coupon_amount">
                <view class="coupon_amount_icon">￥</view>
                <view>{{ item.amount }}</view>
              </view>
              <view class="coupon_btn" @click="useCoupon(item, index)">立即使用</view>
            </view>

            <!-- <view class="coupon_select_box">
              <image v-if="item.selected" class="coupon_select_icon" src="https://www.dingxians.cn/images/box/selected.png"></image>
              <image v-else class="coupon_select_icon" src="https://www.dingxians.cn/images/box/un_select.png"></image>
            </view> -->
          </view>
        </view>
        <!-- <view class="coupon_btn" v-if="selected_coupon_id" @click="confirmCoupon()">确定</view>
        <view class="coupon_btn disable" v-else>确定</view> -->
      </view>
    </my-content>
    <view class="open_box">
      <view @click="openPay(1)" class="btn-image"
        style="background-image: url('https://www.dingxians.cn/upload/user_static/common/btn-primary-blue.png')">
        <text style="font-family: 'youshe',serif">一发入魂</text>
      </view>
      <view @click="openPay(2)" class="btn-image"
        style="background-image: url('https://www.dingxians.cn/upload/user_static/common/btn-primary-red.png')">
        <text style="font-family: 'youshe',serif">欧气三连</text>
      </view>
      <view @click="openPay(3)" class="btn-image"
        style="background-image: url('https://www.dingxians.cn/upload/user_static/common/btn-primary-small.png')">
        <text style="font-family: 'youshe',serif">霸气五连</text>
      </view>

      <view class="btn-other-group">
        <view class="btn-other-left" :style="{ visibility: showMoreBtn ? 'visible' : 'hidden' }">
          <view @click="openPay(4)" class="btn-item"
            style="background-image: url('https://www.dingxians.cn/upload/user_static/index/btn-green.png')">10连
          </view>
          <view @click="openPay(5)" class="btn-item"
            style="background-image: url('https://www.dingxians.cn/upload/user_static/index/btn-purple.png')">20连
          </view>
          <view @click="openPay(6)" class="btn-item"
            style="background-image: url('https://www.dingxians.cn/upload/user_static/index/btn-blue.png')">30连
          </view>
        </view>
        <view class="btn-other-right" @click="showMoreBtn = !showMoreBtn">
          <text v-if="!showMoreBtn">其他</text>
          <image class="btn-close" v-else src="https://www.dingxians.cn/upload/user_static/index/btn-close.png"></image>
        </view>
      </view>
    </view>
    <my-alert-dialog ref="recharge_dialog" title="提示" :showConfirm="false" cancelString="关闭">
      <view class="dialog-content" style="text-align: center; margin: 20rpx 0;">
        <!-- <image
          style="width: 300rpx; margin: 0 auto;"
          src="https://www.dingxians.cn/upload/user_static/common/down_app.png"
          mode="aspectFit"
        /> -->
        <view>请扫码下载App充值</view>
      </view>
    </my-alert-dialog>

    <view class="big_box1">
      <button class="sm_box" @click="screen('fx')" open-type="share">
        <image src="https://www.dingxians.cn/upload/20250325/67e2389d2dfab.png" mode="scaleToFill" />
      </button>
      <view class="sm_box" @click="screen('sd')">
        <image src="https://www.dingxians.cn/upload/20250325/67e2389d29cc7.png" mode="scaleToFill" />
      </view>
      <!-- <view class="sm_box" @click="screen('jl')">
            <image
                src="https://www.dingxians.cn/upload/20250325/67e2389d2af38.png"
                mode="scaleToFill"
            />
        </view> -->
    </view>
    <tn-popup v-model="rechare" mode="center" @open="open" @close="close">
			<view class="popup bdbx"
				:style="{ backgroundImage: `url(https://www.dingxians.cn/upload/user_static/common/bg-alert-dialog.png)` }">
				<view class="rule_title_box">截图保存二维码使用支付宝支付</view>
				<view class="close" @click="rechare = false"
					style="background-image: url('https://www.dingxians.cn/upload/20250513/6822ecb30f58e.png');"></view>
					<view class="content_box">
				<ayQrcode ref="qrcode" :modal="modal_qr" :url="qr_url" @hideQrcode="hideQrcode" :height="200"
					:width="200" style="margin: auto;"/>
					</view>
			</view>
		</tn-popup>
  </view>
</template>

<script>
import api from '../../api/index.js'
import box from '@/mixins/box'

export default {
  mixins: [box],
  data() {
    return {
      min_multiple: 1,
      blindBoxDetail: {
        id: '',
        cat_id: '',
        max_multiple: 1,
        blind_box_prize: [],
      },
      autoplay: true,
      interval: 6000,
      duration: 1000,
      index: 0,
      goods_prize: 0,
      goods_title: '',
      prizeStatus: false,
      payStatus: false,
      shadeStatus: false,
      agreeStatus: true,
      animationStatus: false,
      levelId: 1,
      prizeData: [],
      payMode: 1,
      multiple: 1,

      tabId: 1,
      levelData: [
        { id: '', title: '全部' },
        { id: 4, title: '传说' },
        { id: 3, title: '史诗' },
        {
          id: 2,
          title: '稀有',
        },
      ],
      logData: [],
      refreshStatus: false,
      page: 1,
      last_page: 1,
      selectLevelId: '',

      token: '',
      coupon_amount: 0,
      couponData: [],
      couponStatus: false,
      coupon_id: '', // 最终选择的优惠券
      selected_coupon_id: '',
      selected_coupon_amount: 0,
      last_times: 0,
      current: 0,

      point_price: 0,
      user_point: 0,

      barrageData: [],
      timer: null,
      barrage_index: 0,

      level_1_prize: [],
      level_2_prize: [],
      level_3_prize: [],
      level_4_prize: [],
      drawStatus: true,

      pay_more_mode: 2,
				//二维码相关参数
				modal_qr: false,
				rechare:false,
				qr_url: '',
      pay_mode_list: [
        {
          id:1,
          icon: 'https://www.dingxians.cn/images/common/wechat.png',
          name: '微信'
        },
        {
          id:2,
          icon: 'https://www.dingxians.cn/images/common/alipay.png',
          name: '支付宝'
        }
      ],
      // 是否是多支付
      is_pay_more: false,
      // 多支付差额
      difference_amount: 0,
      // 显示更多充钱按钮
      showMoreBtn: false,
      pay_amount: '',
      is_one: false,//是否第一次进入页面
      out_trade_no: '',
    }
  },
  computed: {
    // pay_amount() {
    //   let balance_price = this.total_amount - this.coupon_amount - this.point_price
    //   return balance_price > 0 ? balance_price.toFixed(2) : 0
    // },
    total_amount() {
      const price = this.getPrice()
      return price * this.multiple
    },
  },

  watch: {
    multiple(newVal) {
      this.getPriceSpread()
    },
  },
  onLoad(option) {
    this.is_one = false
    this.blindBoxDetail.id = option.id
    this.getData()
  },
  onShow() {
    setTimeout(() => {
      if (this.out_trade_no) {
        api.rechargeOrders
          .getRechargeOrdersInfo({
            order_no: this.out_trade_no
          }).then(res => {
            if (res.code == 200) {
              if (res.data.data.status == 1) {
                this.show('支付成功')
                setTimeout(() => {
                  this.is_pay_more = false
                  this.difference_amount = 0
                  this.draw()
                }, 500)
              } else {
                this.show('支付失败')
              }
              console.log(res)
            }
          })
      }
    },500)
    this.drawStatus = true
    this.token = uni.getStorageSync('token')
    this.selected_coupon_id = ''
    this.selected_coupon_amount = 0
    this.coupon_id = ''
    this.coupon_amount = 0
    if (this.is_one) {
      this.getPriceSpread()
      this.openPay(uni.getStorageSync('openPayMode'))
    }
    if (this.token) {
      // 获取优惠券
      // this.getCoupon()
      // this.getUser()
    }
    // this.getBarrage();
  },
  onHide() {
    this.payStatus = false
    this.shadeStatus = false
    this.rechare = false
  },
  methods: {
    // 功能按钮
    screen(item) {
      if (item == "fx") {
        // this.onShareAppMessage() //分享
      } else if (item == 'sd') {
        this.header('/pages/box/index', 2)
      }
    },
    onShareAppMessage() {
      let that = this
      return {
        title: that.blindBoxDetail.name,
        imageUrl: that.blindBoxDetail.image,
        path: 'pages/index/detail?id=' + that.blindBoxDetail.id,
        type: 5,
      }
    },
    getPrice() {
      let price
      console.log(this.payMode)
      switch (this.payMode) {
        case 1:
          price = this.blindBoxDetail.price
          break
        case 2:
          price = this.blindBoxDetail.price * 3
          break
        case 3:
          price = this.blindBoxDetail.price * 5
          break
        case 4:
          price = this.blindBoxDetail.price * 10
          break
        case 5:
          price = this.blindBoxDetail.price * 20
          break
        case 6:
          price = this.blindBoxDetail.price * 30
          break
      }
      return price
    },
    /*  choosePayMoreMode(index) {
      this.pay
    }, */
    getBarrage() {
      this.barrage_index = 0
      if (this.timer) {
        clearInterval(this.timer)
      }
      api.blindBox
        .barrage(this.blindBoxDetail.id)
        .then((res) => {
          if (res.code == 200) {
            this.barrageData = res.data
            if (this.barrageData.length > 0) {
              this.timer = setInterval(() => {
                if (this.barrage_index > this.barrageData.length - 1) {
                  clearInterval(this.timer)
                  return
                }
                this.$refs.barrage.add({
                  item: this.barrageData[this.barrage_index].nickname,
                  avatar: this.barrageData[this.barrage_index].avatar,
                  level_color: this.barrageData[this.barrage_index].level_color,
                  level_name: this.barrageData[this.barrage_index].level_name,
                  blind_box_prize_image: this.barrageData[this.barrage_index].blind_box_prize_image,
                  blind_box_prize_name: this.barrageData[this.barrage_index].blind_box_prize_name,
                })
                this.barrage_index++
              }, 5000)
            }
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    getCoupon() {
      api.userCoupons
        .show({
          blind_box_id: this.blindBoxDetail.id,
          multiple: this.multiple,
          pay_mode: this.payMode,
        })
        .then((res) => {
          if (res.code == 200) {
            this.couponData = res.data.data
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    getUser() {
      api.users
        .show({ type: 'simple' })
        .then((res) => {
          if (res.code == 200) {
            this.user_point = res.data.point
            this.point_price = this.total_amount - this.coupon_amount
            this.point_price = (this.user_point > this.point_price ? this.point_price : this.user_point).toFixed(2)
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    changePirze(id) {
      for (var i = 0; i < this.blindBoxDetail.blind_box_prize.length; i++) {
        if (this.blindBoxDetail.blind_box_prize[i].id == id) {
          this.current = i
          break
        }
      }
    },
    // useCoupon(item, index) {
    //   this.selectCoupon(item, index)
    //   this.confirmCoupon()
    // },
    selectCoupon(item, index) {
      for (var i = 0; i < this.couponData.length; i++) {
        this.couponData[i].selected = false
      }
      item.selected = !item.selected
      this.selected_coupon_id = item.id
      this.selected_coupon_amount = item.amount
      this.$set(this.couponData, index, item)
    },
    // 确定优惠券
    confirmCoupon() {
      this.coupon_id = this.selected_coupon_id
      this.coupon_amount = this.selected_coupon_amount
      // 多支付的金额减去优惠后的价格
      /*this.difference_amount -= this.selected_coupon_amount*/
      this.couponStatus = false

      this.point_price = this.total_amount - this.coupon_amount
      this.point_price = this.user_point > this.point_price ? this.point_price : this.user_point

      this.getPriceSpread()
    },
    lower() {
      if (this.page > this.last_page) {
        this.show('没有更多数据了')
        return
      }
      this.page++
      this.getLog(1)
    },
    refresh() {
      this.refreshStatus = true
      this.page = 1
      this.getLog(2)
    },
    back() {
      uni.navigateBack()
    },
    play() {
      this.header('/packageB/content/playRule?content=' + 'play_rule')
    },
    changeLevel(level_id) {
      if (this.levelId != level_id) {
        this.levelId = level_id
        this.prizeData = this.blindBoxDetail.blind_box_prize.filter((item) => {
          return item.level_id == level_id
        })
      }
    },
    // 同意用户协议
    changeAgree() {
      this.agreeStatus = !this.agreeStatus
    },
    showPrize() {
      this.prizeStatus = true
      this.shadeStatus = true
    },
    showCoupon() {
      this.couponStatus = true
      this.shadeStatus = true
    },
    closeCoupon() {
      this.couponStatus = false
    },
    closePrize() {
      this.prizeStatus = false
      this.shadeStatus = false
    },
    closeShade() {
      this.prizeStatus = false

      if (!this.couponStatus) {
        this.payStatus = false
        this.shadeStatus = false
      }
      this.couponStatus = false
    },
    getData() {
      uni.showLoading({
        title: '数据加载中',
      })
      api.blindBox
        .show(this.blindBoxDetail.id)
        .then((res) => {
          uni.hideLoading()
          if (res.code === 200) {
            this.blindBoxDetail = res.data.data
            // console.log(this.blindBoxDetail)
            this.goods_prize = this.blindBoxDetail.blind_box_prize[0].price
            this.goods_title = this.blindBoxDetail.blind_box_prize[0].title

            // this.prizeData = this.blindBoxDetail.blind_box_prize.filter(item => {
            // 	return item.level_id == 1
            // })
            this.level_1_prize = this.blindBoxDetail.blind_box_prize.filter((item) => {
              return item.level_id == 1
            })
            this.level_2_prize = this.blindBoxDetail.blind_box_prize.filter((item) => {
              return item.level_id == 2
            })
            this.level_3_prize = this.blindBoxDetail.blind_box_prize.filter((item) => {
              return item.level_id == 3
            })
            this.level_4_prize = this.blindBoxDetail.blind_box_prize.filter((item) => {
              return item.level_id == 4
            })
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    changeBox(e) {
      let index = e.detail.current
      this.goods_prize = this.blindBoxDetail.blind_box_prize[index].price
      this.goods_title = this.blindBoxDetail.blind_box_prize[index].title
    },
    openPay(pay_mode) {
      if (!this.token) {
        this.header('/pages/user/wxlogin')
        return
      }
      this.payStatus = true
      this.shadeStatus = true
      this.payMode = pay_mode
      uni.setStorageSync('openPayMode', this.payMode)
      // 计算价格
      // this.coupon_amount = 0
      // this.selected_coupon_amount = 0
      // this.coupon_id = ''
      // this.selected_coupon_id = ''
      // this.point_price = this.total_amount - this.coupon_amount
      // this.point_price = this.user_point > this.point_price ? this.point_price : this.user_point

      this.is_pay_more = false
      // this.difference_amount = 0

      // this.getCoupon()
      this.getPriceSpread()
    },
    getPriceSpread() {
      this.point_price = 0
      this.pay_amount = 0
      this.is_one = true
      api.blindBox
        .priceSpread({
          blind_box_id: this.blindBoxDetail.id,
          pay_mode: this.payMode,
          multiple: this.multiple,
          coupon_id: this.coupon_id,
          // point_price: this.point_price,
          version: 1,
        })
        .then((res) => {
          if (res.code === 401) {
            this.is_pay_more = true
            this.difference_amount = res.data.difference_amount
            this.point_price = res.data.deduction_point
            this.pay_amount = res.data.deduction_balance
          } else if (res.code === 200) {
            this.is_pay_more = false
            this.point_price = res.data.data.deduction_point
            this.pay_amount = res.data.data.deduction_balance
            this.difference_amount = 0
          }
          console.log(this.point_price, ('虎币'), this.pay_amount, ('虎元素'))
        })
    },
    closePay() {
      this.payStatus = false
      this.shadeStatus = false
    },
    navigatePay() {
      // 创建充值订单
      let pay_type = this.pay_more_mode
      api.rechargeOrders
        .store({ type: pay_type, id: 0, amount: this.difference_amount })
        .then((res) => {
          if (res.code === 200) {
            let pay_data = res.data.data
            if(pay_type == 1){
              uni.requestPayment({
              provider: 'wxpay',
              timeStamp: pay_data.timeStamp,
              nonceStr: pay_data.nonceStr,
              package: pay_data.package,
              signType: pay_data.signType,
              paySign: pay_data.paySign,
              success: (res) => {
                this.show('支付成功')
                setTimeout(() => {
                  // this.getUser()
                  this.is_pay_more = false
                  this.difference_amount = 0
                  this.draw()
                }, 500)
              },
              fail: (err) => {
                console.log(err)
              },
            })
            }else{

              this.out_trade_no = ''
            this.qr_url = pay_data.qr_code
            this.out_trade_no = pay_data.out_trade_no
            this.showQrcode()
            }
            
            
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    
			// 展示二维码
			showQrcode() {
				let _this = this;
				_this.rechare = true
				this.modal_qr = true;
				// uni.showLoading()
				setTimeout(function() {
					// uni.hideLoading()
					_this.$refs.qrcode.crtQrCode()
				}, 50)
			},

			//传入组件的方法
			hideQrcode() {
				this.modal_qr = false;
			},
    draw() {
      this.out_trade_no = ''
      if (!this.agreeStatus) {
        this.show('请先同意用户协议')
        return
      }
      if (this.is_pay_more) {
        this.navigatePay()
        return
      }
      this.drawStatus = false
      uni.showLoading({
        title: '抽奖中',
      })
      let params = {
        blind_box_id: this.blindBoxDetail.id,
        pay_mode: this.payMode,
        multiple: this.multiple,
        coupon_id: this.coupon_id,
        point_price: this.point_price,
        version: 1,
      }
      api.blindBox
        .draw(params)
        .then((res) => {
          console.log(res.code)
          uni.hideLoading()
          if (res.code === 200) {
            if (res.data.status == 1) {
              this.header(
                `/pages/index/draw?box_order_id=${res.data.box_order_id}&box_id=${this.blindBoxDetail.id}&pay_mode=${this.payMode}`,
              )
            } else if (res.data.status == 0) {
              this.show(res.msg)
              setTimeout(() => {
                this.header(`/pages/user/recharge`)
              }, 500)
            }
          } else if (res.code === 401) {
            this.is_pay_more = true
            this.difference_amount = res.data.difference_amount
          }
          this.drawStatus = true
        })
        .catch((error) => {
          console.log(error)
        })
    },
    changeLog() {
      this.tabId = 2
      this.page = 1
      this.selectLevelId = ''
      this.getLog(2)
    },
    getLog(type) {
      uni.showLoading({
        title: '数据加载中',
      })
      api.blindBoxOrderPrizeLogs
        .index({
          blind_box_id: this.blindBoxDetail.id,
          page: this.page,
          level_id: this.selectLevelId,
        })
        .then((res) => {
          uni.hideLoading()
          if (res.code === 200) {
            if (type == 1) {
              this.logData = this.logData.concat(res.data.data)
            } else {
              this.logData = res.data.data
            }
            this.last_page = res.data.last_page
            this.refreshStatus = false
            this.last_times = res.data.last_times
            console.log(res.data)
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    getPrize() {
      this.tabId = 1
    },
    changeSelectLevel(id) {
      if (this.selectLevelId != id) {
        this.page = 1
        this.selectLevelId = id
        this.getLog(2)
      }
    },
  },
}
</script>

<style lang="scss" scoped>


/deep/.tn-popup__content__center_box {
    background-color: rgba(255, 255, 255, 0) !important;
}
.popup {
		width: 708rpx;
		height: 709rpx;
		background-size: 100% 100%;
		position: relative;
		box-sizing: border-box;
		padding-top: 46rpx;

		.close {
			position: absolute;
			width: 48rpx;
			height: 48rpx;
			background-size: 100% 100%;
			top: 44rpx;
			right: 53rpx;
		}

		.rule_title_box {
			margin: auto;
			width: 100%;
			height: 112rpx;
			line-height: 112rpx;
			margin-bottom: 33rpx;
			background-size: 100% 100%;
			font-family: Source Han Serif CN;
			font-weight: bold;
			font-size: 24rpx;
			color: #FFFFFF;
			text-align: center;
		}
		.content_box{
			width: 100%;
			height: 300rpx;
			display: flex;
			justify-content: center;
		}

	}
	
@keyframes beat {
  0% {
    bottom: 15%;
  }

  100% {
    bottom: 5%;
  }
}

.barrage {
  position: fixed;
  right: 0;
  width: 100%;
  height: 500rpx;
  z-index: 100;
}

.shade {
  position: fixed;
  height: 100%;
  width: 100vw;
  z-index: 999;
  background-color: #000;
  opacity: 0;
  transition: all 0.5s; //这是滑入划出的动画

  &.show {
    opacity: 0.5;
    z-index: 99;
  }

  &.hidden {
    opacity: 0;
    z-index: -1;
  }
}

.index-detail-layout {
  height: 100vh;
  position: relative;
  overflow: hidden;
  background: url('https://www.dingxians.cn/upload/user_static/index/bg-detail.png');
  background-size: 100% 100%;

  .tabbar {
    /*  display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: fixed;
    left: 0;
    top: 80rpx;
    z-index: 5; */

    .play,
    .back {
      width: 65rpx;
      height: 65rpx;
    }

    .play {
      margin-right: 20rpx;
    }

    .back {
      margin-left: 20rpx;
    }

    .tabbar_name {
      font-size: 24rpx;
      position: relative;
      width: 474rpx;
      height: 94rpx;
      display: flex;
      align-items: center;
      background-image: url('https://www.dingxians.cn/upload/user_static/index/bg-index-tabbar.png');
      background-size: 100% 100%;

      .user-avatar {
        min-width: 70rpx;
        width: 70rpx;
        height: 70rpx;
        margin-left: 12rpx;
        border-radius: 50%;
      }

      .user-name {
        width: 100%;
        display: flex;
        align-items: center;
        margin-left: 30rpx;
        font-size: 24rpx;
        color: white;

        .num {
          margin-left: 10rpx;
          font-size: 32rpx;
        }
      }

      &.active {
        font-weight: bold;
        font-size: 32rpx;
      }

      .tabbar_bg {
        position: absolute;
        top: -20rpx;
        left: 0;
        width: 232px;
        z-index: -1;
      }

      .rank_avatar {
        width: 60rpx;
        border-radius: 50%;
        height: 60rpx;
        margin-right: 10rpx;
      }

      .rank_user {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 24rpx;

        .rank_time {
          color: red;
        }
      }
    }
  }

  .play {
    width: 65rpx;
    height: 65rpx;
    /* #ifdef MP-WEIXIN */
    margin-top: 80rpx;
    /* #endif */
  }
}

.content {
  height: calc(100% - 120rpx);
  display: flex;
  flex-direction: column;
  overflow-y: scroll;

  .scroll-content {
    /*height: 130vh;*/
    /*overflow-y: hidden;*/
  }

  .bg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
  }

  .try_play {
    position: fixed;
    top: 200rpx;
    left: 0;
    width: 115rpx;
    height: 117rpx;
    z-index: 3;
  }

  .rule {
    position: fixed;
    top: 300rpx;
    right: 0;
    width: 115rpx;
    height: 117rpx;
    z-index: 3;
    writing-mode: vertical-lr;
    width: 30rpx;
    text-align: center;
    background-color: #fe6bba;
    border-top-left-radius: 10rpx;
    border-bottom-left-radius: 10rpx;
    font-size: 24rpx;
    color: #fff;
  }
}

.box {
  height: 700rpx;
  width: 100%;
  /*flex: 1;*/
  /* height: 700rpx; */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-bottom: 20rpx;

  .swiper {
    position: relative;
    width: 100%;
    height: 100%;
    /* height: 500rpx; */
    z-index: 3;

    &::after {
      content: '';
      display: block;
      position: absolute;
      z-index: -1;
      bottom: -100rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 600rpx;
      height: 400rpx;
      background: url('https://www.dingxians.cn/upload/user_static/index/bg-bottom-box.png');
      background-size: 100% 100%;
    }

    .swiper_item {
      display: flex;
      justify-content: center;
      align-items: flex-end;
      position: relative;
      z-index: 5;

      .swiper_image {
        // width: 300rpx;
        height: 300rpx;
        position: absolute;
        animation-name: beat;
        z-index: 6;
        /*动画名称*/
        animation-duration: 1s;
        /*设置秒数*/
        animation-timing-function: linear;
        /*速度曲线*/
        animation-iteration-count: infinite;
        /*播放次数*/
        animation-direction: alternate;
        /*逆向播放*/
        animation-play-state: running;
      }
    }
  }

  .prize_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 600rpx;
    margin: 0 auto;
    flex-direction: column;
    height: 180rpx;
    color: white;

    .prize_name {
      // margin-bottom: 40rpx;
      text-align: center;
      width: 570rpx;
      height: 50rpx;
      line-height: 50rpx;
      /* height: 50rpx; */
      font-size: 24rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      box-sizing: border-box;
      padding: 0 20rpx;
      /* display: -webkit-box; */
      /*  -webkit-box-orient: horizontal;
      -webkit-line-clamp: 1; */
      /* 设置行数 */
      /* -webkit-box-orient: vertical; */
      background-image: url('https://www.dingxians.cn/upload/user_static/index/bg-name.png');
      background-size: 100% 100%;
    }

    .box_prize {
      display: flex;
      align-items: baseline;
      font-weight: bold;
      font-size: 26rpx;
      color: white;
      height: 56rpx;
      padding: 0 80rpx;
      // margin-top: 40rpx;
      background-image: url('https://www.dingxians.cn/upload/user_static/index/bg-price.png');
      background-size: 100% 100%;
      color: #ded000;

      .box_prize_num {
        font-size: 40rpx;
      }

      .box-price2 {
        display: inline-block;
        text-decoration: line-through;
        margin-left: 10rpx;
        color: white;
        font-size: 26rpx;
      }
    }
  }
}

.header {
  display: flex;
  border-radius: 10rpx;
  width: 680rpx;
  margin: 0 auto 20rpx auto;
  padding: 20rpx;
  align-items: center;
  background-color: #fefeff;
  justify-content: space-between;
  height: 50rpx;

  .header_top {
    display: flex;
    align-items: baseline;
    font-size: 46rpx;
    font-weight: bold;
    color: #383838;

    .header_top_icon {
      font-size: 26rpx;
    }
  }

  .header_box_name {
    color: #6949b0;
    font-size: 38rpx;
    font-weight: bold;
  }
}

.goods_box {
  display: flex;
  flex-direction: column;
  /* border: 1rpx solid #fff; */
  border-radius: 10rpx;
  margin: 0 auto;
  width: 720rpx;
  /*overflow-y: scroll;*/

  .goods_box_top {
    display: flex;
    border-radius: 10rpx;
    padding: 20rpx;
    justify-content: space-between;
    align-items: center;
    background-image: url('https://www.dingxians.cn/upload/user_static/index/bg-level.png');
    background-size: 100% 100%;

    .goods_header {
      display: flex;
      justify-content: space-around;
      align-items: center;
      /* background-color: #fff; */
      border-radius: 10rpx;
      flex: 1;

      .goods_pro {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        height: 73rpx;
        font-size: 24rpx;

        .goods_price {
          font-size: 24rpx;
          color: white;
        }

        .level {
          width: 100rpx;
          height: 40rpx;
          background-size: 100% 100%;
          color: white;
          font-weight: bold;
          box-sizing: border-box;
          padding-left: 45rpx;
          line-height: 40rpx;
          font-size: 20rpx;
        }

        .header_bottom_text {
          background-size: 100% 100%;
          color: white;
          width: 98rpx;
          height: 52rpx;
          text-align: center;
          line-height: 52rpx;
          font-size: 32rpx;

          &.active {
            font-weight: bold;
            color: #ded000;
            background-image: url('https://www.dingxians.cn/upload/user_static/index/tab-current.png');
          }

          &.level {
            font-weight: bold;
          }
        }
      }
    }

    .goods_bottom {
      display: flex;
      justify-content: center;
      margin-left: 10rpx;
      width: 158rpx;
      height: 67rpx;
    }
  }

  .goods_box_bottom {
    display: flex;
    width: 720rpx;
    margin: 20rpx auto;
    /*overflow-y: auto;*/
    /*height: 550rpx;*/
    /*height: 800rpx;*/
    flex-direction: column;

    .goods_item_box {
      position: relative;
      display: flex;
      flex-direction: column;
      /* width: 100%; */
      background-size: 100% 100%;
      padding: 20rpx 40rpx;
      margin: 10rpx 0;

      .goods_item_level {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 0;
        /*z-index: 99;*/
        /*  border-bottom: 1rpx solid #fff; */
        height: 56rpx;
        line-height: 56rpx;
        /* margin-bottom: 20rpx; */
        /* display: flex;
        align-items: baseline;
        justify-content: center; */
        background-size: 100% 100%;
        padding: 0 40rpx 10rpx;
        white-space: nowrap;

        .goods_item_level_title {
          margin-right: 20rpx;
          height: 30rpx;
          width: 100rpx;
        }

        .goods_item_level_pro {
          /* line-height: 56rpx; */

          font-size: 24rpx;
          color: #fff;
        }
      }

      .goods_item_arr {
        display: flex;
        overflow: scroll;
        width: 100%;
        padding-top: 50rpx;

        .goods_item {
          width: 168rpx;
          /* height: 250rpx; */
          align-items: center;
          margin: 0 26rpx 20rpx 0;

          .goods-image {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 168rpx;
            height: 168rpx;
            margin: 10rpx 30rpx 10rpx 0;
            background-size: 100% 100%;
          }

          .goods-name {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-align: center;
            font-size: 22rpx;
            color: white;
            width: 100%;
            margin-top: 5rpx;
          }

          .goods-price {
            color: white;
            font-size: 28rpx;
            width: 100%;
            text-align: center;
          }

          .goods_info {
            height: 168rpx;
            display: flex;
            align-items: center;
            justify-content: space-around;
            position: relative;
            width: 168rpx;
            flex-direction: column;

            /* .level_image {
              position: absolute;
              top: 0;
              left: 0;
              height: 168rpx;
              width: 168rpx;
              border-radius: 5rpx;
            }

            .goods_image {
              height: 150rpx;
              margin-top: 30rpx;
              background-size: 100% 100%;
            } */

            .goods_price_name {
              display: flex;
              flex-direction: column;
              width: 100%;
              z-index: 10;
              color: #fff;
              font-size: 24rpx;
              justify-content: center;
              align-items: center;

              .goods_name {
                width: 90%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                text-align: center;
              }
            }
          }
        }
      }
    }

    .scroll {
      height: 500rpx;
      display: flex;
      flex-direction: column;
      font-size: 24rpx;
      color: #fff;

      .scroll_top {
        text-align: center;
        margin-bottom: 10rpx;

        .scroll_top_num {
          color: #ded000;
          font-weight: bold;
          font-size: 30rpx;
          margin: 0 10rpx;
        }
      }

      .scroll_box {
        display: flex;
        flex-direction: column;

        .scroll_item {
          height: 84rpx;

          display: flex;
          justify-content: center;
          width: 710rpx;
          animation: 1.5s infinite steps(48) forwards;
          flex-direction: column;
          background-size: 100% 4032rpx;

          &.active {
            margin-bottom: 20rpx;
          }

          &.active2 {
            margin-bottom: 10rpx;
          }

          .scroll_item_top {
            display: flex;
            justify-content: space-between;
            margin: 10rpx 0;

            .scroll_item_left {
              display: flex;
              align-items: center;

              .user_avatar {
                border-radius: 50%;
                width: 40rpx;
                height: 40rpx;
                margin-right: 10rpx;
                margin-left: 24rpx;
              }

              .scroll_user {
                display: flex;
                /* flex-direction: column; */
                font-size: 24rpx;

                .scroll_prize_name {
                  width: 100rpx;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  margin-left: 20rpx;

                  color: #d1d0b8;
                }

                .scroll_user_nickname {
                  margin-left: 10rpx;
                }
              }
            }

            .scroll_item_right {
              display: flex;
              align-items: center;


              .scroll_prize_name {
                width: 100rpx;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                margin-left: 20rpx;
                color: #d1d0b8;
              }

              .goods-info {
                display: flex;
                margin-right: 24rpx;
                /* position: relative; */

                .goods-num {
                  /* position: absolute;
                  right: 0;
                  top: 0; */
                  align-self: flex-start;
                  color: #ded000;
                }
              }

              .scroll_prize_image {
                width: 70rpx;
                height: 70rpx;
                margin-left: 20rpx;
              }

              .scroll_prize_level {
                font-weight: bold;
                width: 78rpx;
                height: 32rpx;
              }
            }
          }

          .scroll_item_bottom {
            margin-left: 10rpx;
          }
        }
      }
    }
  }
}

.coupon_pop {
  transition: all 0.6s; //这是滑入划出的动画
  position: fixed;
  width: 100%;
  height: 730rpx;
  bottom: -100%;
  border-top-right-radius: 20rpx;
  border-top-left-radius: 20rpx;
  background-color: #141414;
  z-index: 1502;
  max-height: 80%;

  /* background: linear-gradient(to top, #fefeff, #ceb8ff); */

  &.show {
    bottom: 0;
  }

  &.hidden {
    bottom: -100%;
  }

  display: flex;
  flex-direction: column;

  .coupon_header {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: 25rpx;
    justify-content: center;
    height: 80rpx;
    position: relative;

    .coupon_close {
      position: absolute;
      right: 30rpx;
      top: -150%;
      width: 64rpx;
      height: 64rpx;
      z-index: 10000;
    }

    .coupon_header_title {
      font-size: 36rpx;
      font-weight: bold;
      margin-bottom: 20rpx;
      color: white;
    }
  }

  .coupon_content {
    display: flex;
    flex-direction: column;
    width: 715rpx;
    margin: 30rpx auto 0;
    height: 100%;
    /* max-height: 500rpx; */
    overflow: scroll;

    // border: 1rpx solid red;
    .coupon_item {
      display: flex;
      margin-bottom: 20rpx;
      height: 200rpx;
      border-radius: 10rpx;
      /* background-color: #fff; */
      background-image: url('https://www.dingxians.cn/upload/user_static/user/bg-coupon-items.png');
      background-size: 100% 100%;

      // overflow: hidden;
      .coupon_left {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        /* background-color: #a361f6; */
        height: 200rpx;
        width: 180rpx;
        margin-right: 20rpx;
        border-top-left-radius: 10rpx;
        border-bottom-left-radius: 10rpx;
        position: relative;
        z-index: 2;

        .coupon_bg {
          position: absolute;
          top: 0;
          left: 0;
          height: 200rpx;
          width: 180rpx;
          border-top-left-radius: 10rpx;
          border-bottom-left-radius: 10rpx;
          z-index: -1;
        }

        .coupon_amount {
          font-size: 78rpx;
          color: white;
          font-weight: bold;
          display: flex;
          align-items: baseline;
          text-shadow: 0px 0px 16px #a84700;

          .coupon_amount_icon {
            font-size: 48rpx;
          }
        }

        .coupon_min_amount {
          font-size: 24rpx;
        }

        .coupon_btn {
          margin-top: 10rpx;
          color: white;
          width: 148rpx;
          height: 48rpx;
          line-height: 48rpx;
          background-image: url('https://www.dingxians.cn/upload/user_static/user/bg-use-coupon.png');
          background-size: 100% 100%;
          text-align: center;
        }
      }

      .coupon_right {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        flex: 1;

        .coupon-info {
          display: flex;
          margin-left: 24rpx;
          color: #fffab5;
          font-size: 24rpx;
        }

        .coupon_title {
          font-size: 48rpx;
          color: #ded000;
          font-family: 'youshe';
          margin-left: 24rpx;
        }

        .coupon_remark {
          font-size: 26rpx;
          margin-right: 10rpx;
        }

        .coupon_bottom {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 370rpx;
          height: 40rpx;
          box-sizing: border-box;
          padding-left: 24rpx;
          line-height: 40rpx;
          background-image: url('https://www.dingxians.cn/upload/user_static/user/bg-coupon-item-time.png');
          background-size: 100% 100%;

          .created_at {
            font-size: 24rpx;
            color: #000;
          }

          .use {
            border-radius: 20rpx;
            padding: 10rpx 20rpx;
            font-size: 24rpx;
            background-color: #a361f6;
            margin-right: 10rpx;
          }
        }
      }

      .coupon_select_box {
        display: flex;
        justify-content: flex-end;
        align-items: center;

        .coupon_select_icon {
          width: 40rpx;
          height: 40rpx;
          margin-right: 20rpx;
        }
      }
    }
  }

  /* .coupon_btn {
    width: 600rpx;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    background-color: #a361f6;
    border-radius: 10rpx;
    margin: 20rpx auto;

    &.disable {
      background-color: #e7e7e7;
      color: #666;
    }
  } */
}

.open_box {
  height: 120rpx;
  display: flex;
  align-items: center;
  width: 100%;
  /* position: fixed; */
  bottom: 18rpx;
  box-sizing: border-box;
  padding: 10rpx;
  /* left: 0; */
  justify-content: space-around;
  background-color: #141414;

  .open_btn {
    height: 100rpx;
    width: 160rpx;
  }
}

.prize_pop {
  transition: all 0.6s; //这是滑入划出的动画
  position: fixed;
  width: 100%;
  bottom: -100%;
  border-top-right-radius: 20rpx;
  border-top-left-radius: 20rpx;
  // background-color: #f7f7f7;
  height: 1000rpx;
  z-index: 1500;
  max-height: 80%;

  background: linear-gradient(to bottom, #b8f6e8, #f7f7f7);

  &.show {
    bottom: 0;
  }

  &.hidden {
    bottom: -100%;
  }

  display: flex;
  flex-direction: column;

  .prize_pop_header {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin: 20rpx 0;
    justify-content: center;
    height: 150rpx;
    position: relative;

    .prize_pop_close {
      position: absolute;
      right: 10rpx;
      top: 0;
      width: 40rpx;
      height: 40rpx;
      z-index: 10000;
    }

    .prize_pop_header_title {
      font-size: 36rpx;
      font-weight: bold;
      margin-bottom: 20rpx;
    }

    .prize_pop_header_num {
      color: #999;
    }
  }

  .prize_pro_box {
    display: flex;
    justify-content: space-between;
    width: 700rpx;
    margin: 20rpx auto;

    .prize_pro_item {
      display: flex;
      flex-direction: column;
      align-items: center;

      .prize_level_name {}

      .prize_pro {
        font-size: 24rpx;
        border: 1rpx solid #999;
        border-radius: 10rpx;
        color: #999;
        width: 100rpx;
        text-align: center;
        line-height: 40rpx;
        height: 40rpx;
        margin-top: 10rpx;

        &.active {
          background-color: #409eff;
          border: 1rpx solid #409eff;
          color: #fff;
        }
      }
    }
  }

  .prize_box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 700rpx;
    margin: 0 auto;
    // background-color: #f7f7f7;
    height: 1000rpx;
    overflow: auto;

    .prize_item {
      display: flex;
      flex-direction: column;
      width: 340rpx;
      background-color: #fff;
      border-radius: 10rpx;
      margin-bottom: 20rpx;
      height: 500rpx;

      .prize_image {
        // width: 100%;
        height: 300rpx;
      }

      .prize_content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;

        .prize_name {
          margin: 20rpx 0 0 20rpx;
          font-size: 30rpx;
          line-height: 50rpx;
          width: 300rpx;
          -webkit-line-clamp: 2;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }

        .prize_price {
          margin: 20rpx;
          display: flex;
          align-items: baseline;
          font-size: 40rpx;

          .price_icon {
            font-size: 24rpx;
          }
        }
      }
    }
  }
}

.open_box {
  position: relative;
  /* margin: 0 10rpx; */

  .btn-image {
    width: 228rpx;
    height: 84rpx;
    margin: 20rpx auto;
    background-size: 100% 100%;
    line-height: 84rpx;
    text-align: center;
    color: white;
    font-size: 28rpx;
  }

  .btn-other-group {
    font-family: 'youshe', serif;
    position: absolute;
    z-index: 888;
    right: 20rpx;
    left: 20rpx;
    top: -100%;
    display: flex;
    color: #DED000;


    .btn-other-left {
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .btn-item {

        width: 192rpx;
        height: 70rpx;
        background-size: 100% 100%;
        line-height: 70rpx;
        text-align: center;

        &:first-child {
          background-size: cover;
        }
      }
    }

    .btn-other-right {
      margin-left: 20rpx;
      width: 100rpx;
      height: 100rpx;
      line-height: 100rpx;
      font-size: 24rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background-size: 100% 100%;
      background-image: url("https://www.dingxians.cn/upload/user_static/index/btn-other.png");

      .btn-close {
        width: 70rpx;
        height: 70rpx;
        transform: rotateZ(45deg);
      }
    }
  }
}

.pay_pop {
  transition: all 0.6s; //这是滑入划出的动画
  position: fixed;
  width: 100%;
  bottom: -100%;
  box-sizing: border-box;

  border-top-right-radius: 20rpx;
  border-top-left-radius: 20rpx;
  // background-color: #f7f7f7;
  max-height: 800rpx;
  z-index: 1500;
  max-height: 80%;
  background-image: url('https://www.dingxians.cn/upload/user_static/common/bg-dialog.png');
  background-size: 100% 100%;
  padding-bottom: 20rpx;
  color: white;

  .pay-more {
    margin: 0 50rpx 20rpx;

    .pay-mode {
      /* display: flex;
      flex-wrap: wrap; */

      .pay-mode-title {
        font-size: 28rpx;
      }

      .pay-mode-item {
        margin: 30rpx 0;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .pay-mode-left {
          display: flex;
          align-items: center;
        }

        .pay-mode-img {
          width: 62rpx;
          height: 62rpx;
          margin-right: 20rpx;
        }

        .pay-mode-select {
          width: 35rpx;
          height: 32rpx;
        }
      }
    }
  }

  .need-pay-num {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20rpx 0;
    font-size: 28rpx;
  }

  &.show {
    bottom: 0;
  }

  &.hidden {
    bottom: -100%;
  }

  display: flex;
  flex-direction: column;

  .pay_header {
    display: flex;
    position: relative;
    justify-content: center;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 30rpx;

    .pay_pop_close {
      width: 64rpx;
      height: 64rpx;
      position: absolute;
      top: -100%;
      right: 20rpx;
    }

    .pay_header_title {
      font-size: 48rpx;
      position: absolute;
      top: -35rpx;
      left: 50%;
      transform: translateX(-50%);
      text-shadow: 1px 1px 2px #000;
    }
  }

  .pay_content {
    display: flex;
    flex-direction: column;
    width: 640rpx;
    margin: 0 auto 20rpx;
    font-size: 30rpx;

    .pay_item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 80rpx;

      .pay_num_box {
        display: flex;
        align-items: center;

        .pay_gold_icon {
          width: 36rpx;
          height: 36rpx;
          margin-right: 10rpx;

          &.point {
            width: 46rpx;
          }
        }
      }

      .coupon {
        display: flex;
        align-items: center;
        color: #666;

        .coupon_icon {
          width: 36rpx;
          height: 36rpx;
          margin-left: 10rpx;
        }
      }
    }
  }

  .greee {
    font-size: 24rpx;
    display: flex;
    /* justify-content: center;
    align-items: center; */
    color: white;
    margin-bottom: 40rpx;

    .agree_icon {
      width: 30rpx;
      height: 30rpx;
      margin-right: 10rpx;
      margin-left: 78rpx;
    }

    .agrees_user {
      color: #ded000;
    }
  }

  .open_btn {}

  .open-box {
    margin: 0 auto;
    width: 610rpx;
    height: 84rpx;
    font-size: 36rpx;
    text-align: center;
    line-height: 84rpx;
    background-image: url('https://www.dingxians.cn/upload/user_static/common/btn-primary.png');
    background-size: 100% 100%;
  }

  .tip_box {
    display: flex;
    flex-direction: column;
    font-size: 24rpx;
    align-items: center;
    justify-content: center;
    color: #808080;
    margin-top: 20rpx;
  }
}


.big_box1 {
  width: 88rpx;
  position: absolute;
  z-index: 999;
  right: 22rpx;
  top: 350rpx;

  .sm_box {
    width: 87rpx;
    height: 108rpx;
    margin-bottom: 40rpx;
    padding: 0;
    background: transparent;
    border: none;

    image {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
